<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />

    <style>
      .dialog {
        max-width: 100vw;
      }
      ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
        scrollbar-arrow-color: red;
      }
      ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
        scrollbar-arrow-color: red;
      }
      ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>

  <body>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- <script src="./sql.js"></script> -->
    <script>
      // 核心方法
      /**
       * @param {
       * 1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
       * 2、transaction：这个方法允许我们根据情况控制事务提交或回滚。
       * 3、executeSql：这个方法用于执行真实的SQL查询
       * }
       */

      // 打开数据库/创建数据库
      /**
       * @param (数据库名称,版本号,描述文本,数据库大小,创建回调)
       */
      const db = openDatabase("mydb", "1.0", "测试的数据库", 2 * 1024 * 1024);
      const uuid = () => {
        const S4 = () => {
          return (((1 + Math.random()) * 0x10000) | 0)
            .toString(16)
            .substring(1);
        };
        return (
          S4() +
          S4() +
          "-" +
          S4() +
          "-" +
          S4() +
          "-" +
          S4() +
          "-" +
          S4() +
          S4() +
          S4()
        );
      };
      const statu = (num = 0, text) => {
        return {
          code: num ? 1 : 0,
          msg: text ? text : num ? num : "出错啦!",
        };
      };
      const date = () => {
        var date = new Date();
        Y = date.getFullYear() + "-";
        M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      };
      // sql 集合
      const sql = {};
      // 部门表
      sql.dep = {
        int: () => {
          db.transaction(function (tx) {
            tx.executeSql(
              "CREATE TABLE IF NOT EXISTS dep (depId unique, depName, date, depSum, depLeader)"
            );
          });
        },
        list: (param, callback) => {
          param.page = param.page || 1;
          param.size = param.size || 5;
          param.kewords = (param.kewords && param.kewords.trim()) || null;
          param.unque = (param.unque && param.unque.trim()) || null;
          db.transaction((tx) => {
            let sql = `select * from dep`;
            let count = `select count(*) from dep`;
            let kewords = "";
            let unque = "";
            if (param.kewords)
              kewords = ` WHERE depName LIKE '%${param.kewords}%'`;
            if (param.unque) unque = ` WHERE depName='${param.unque}'`;
            let page = ` LIMIT ?,?`;
            tx.executeSql(
              count + kewords + unque,
              [],
              (tx, res) => {
                let total = res.rows[0]["count(*)"] || 0;
                tx.executeSql(
                  sql + kewords + unque + page,
                  [(param.page - 1) * param.size || 0, param.size],
                  (tx, results) =>
                    callback({
                      data: [...results.rows],
                      total,
                      msg: "获取参数成功!",
                      code: 1,
                    }),
                  (tx, err) => callback(err)
                );
              },
              (tx, err) => callback(err)
            );
          });
        },
        del: (depId, callback) => {
          if (!depId) return callback(statu());
          db.transaction((tx) => {
            tx.executeSql(
              `DELETE FROM dep where depId=?`,
              [depId],
              () => callback(statu("删除成功!")),
              () => callback(statu())
            );
          });
        },
        add: (param, callback) => {
          if (!param.depName) return callback(statu());
          sql.dep.list({ unque: param.depName }, ({ data }) => {
            if (data.length > 0)
              return callback(
                statu(0, "该部门名称已存在,请更换部门名称后重试!")
              );
            db.transaction((tx) => {
              tx.executeSql(
                `INSERT INTO dep (depId,depName,date,depSum,depLeader) VALUES (?,?,?,0,?)`,
                [uuid(), param.depName, date(), param.depLeader || ""],
                () => callback(statu("新增部门数据成功!")),
                () => callback(statu(0, "新增部门数据失败,请稍后重试!"))
              );
            });
          });
        },
        edit: (param, callback) => {
          if (!param.depId || !param.depName) return callback(statu());
          db.transaction((tx) => {
            tx.executeSql(
              `UPDATE dep SET depName=? WHERE depId=?`,
              [param.depName, param.depId],
              () => callback(statu("更新成功!")),
              () => callback(statu())
            );
          });
        },
      };
      sql.dep.int();
      sql.data = {
        collapse: [
          {
            title: "前言",
            text: `<p>0门槛上手 IndexedDB</p>
                  <p>
                    在前端数据持久化的方案中，对于简单的数据，使用sessionStorage和localStorage能够很好地完成存取，但是对于处理复杂的关系型数据，它就力不从心了。这时必须选用websql或者IndexedDB。
                  </p>
                  <p>
                    IndexedDB是浏览器提供的本地数据库，
                    允许储存大量数据，提供查找接口，还能建立索引。IndexedDB
                    不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL
                    数据库。
                  </p>
                  <h4>js部分</h4>
                  <h5>核心方法</h5>
                  <ul>
                    <li>
                      openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
                    </li>
                    <li>
                      transaction：这个方法允许我们根据情况控制事务提交或回滚。
                    </li>
                    <li>executeSql：这个方法用于执行真实的SQL查询。</li>
                  </ul>
                  <p>
                    具体api可以移步菜鸟教程<a
                      href="https://www.runoob.com/html/html5-web-sql.html"
                      >https://www.runoob.com/html/html5-web-sql.html</a
                    >
                  </p>`,
          },
          {
            title: "简单demo",
            text: `var myDB = {
                  <br />
                  <span style="margin-right: 5px"></span>
                  name: 'formData',
                  <br />
                  <span style="margin-right: 5px"></span>
                  version: 1,
                  <br />
                  <span style="margin-right: 5px"></span>
                  db: null,
                  <br />
                  <span style="margin-right: 5px"></span>
                  };
                  <br />
                  myDB.db = openDatabase(myDB.name, myDB.version, 'test', 100 *
                  1024 * 1024);
                  <br />
                  myDB.db.transaction(function(tx) {
                  <br />
                  <span style="margin-right: 5px"></span>
                  tx.executeSql('', [], function(tx, result) {
                  <br />
                  <span style="margin-right: 5px"></span>
                  <span style="margin-right: 5px"></span>
                  if(result.rows.length!=0){
                  <br />
                  <span style="margin-right: 5px"></span>
                  <span style="margin-right: 5px"></span>
                  <span style="margin-right: 5px"></span>
                  //result.rows.item(i)

                  <br />
                  <span style="margin-right: 5px"></span>
                  <span style="margin-right: 5px"></span>
                  } }, function(tx, error) {

                  <br />
                  <span style="margin-right: 5px"></span>
                  <span style="margin-right: 5px"></span>
                  console.log(error);
                  <br />
                  <span style="margin-right: 5px"></span>
                  });
                  <br />
                  })`,
          },
          {
            title: "SQL语句",
            text: `<p>//新建表</p>
                  <p>
                    'CREATE TABLE IF NOT EXISTS 表名 (列名称1 PRIMARY
                    KEY,列名称2 UNIQUE ,列名称3)'
                  </p>
                  <p>//删除表</p>
                  <p>'DROP TABLE 表名'</p>
                  <p>//清空表</p>
                  <p>'DELETE FROM 表名'</p>
                  <p>//删除条目</p>
                  <p>'DELETE FROM 表名 WHERE 列名称1 = ? and 列名称2 = ?'</p>
                  <p>//新增一条</p>
                  <p>
                    'INSERT INTO 表名 VALUES (?,?,?,?,?,?,?)'　//为所有列添加值
                  </p>
                  <p>
                    'INSERT INTO 表名 (列名称2,列名称4,列名称6) VALUES
                    (?,?,?)'　//为指定列添加值
                  </p>
                  <p>//批量增加</p>
                  <p>insert into persons</p>
                  <p>(id_p, lastname , firstName, city )</p>
                  <p>values</p>
                  <p>(200,'haha' , 'deng' , 'shenzhen'),</p>
                  <p>(201,'haha2' , 'deng' , 'GD'),</p>
                  <p>(202,'haha3' , 'deng' , 'Beijing')</p>
                  <p>//更新一条</p>
                  <p>
                    'UPDATE 表名 SET 列名称1 = ? where 列名称2 = ? AND 列名称3 =
                    ?'
                  </p>
                  <p>
                    'UPDATE 表名 SET 列名称1 = ?,列名称2 = ?,列名称3 = ? where
                    列名称2 = ? AND 列名称3 = ?'
                  </p>
                  <p>　//根据主键存在与否，更新或添加一条数据</p>
                  <p>
                    'replace into 表名 (列名称1,列名称2,列名称3,列名称4,列名称5)
                    VALUES (?,?,?,?,?) '
                  </p>
                  <p>　//查找（更多查询请根据自己的需要自由组合）</p>
                  <p>
                    'select * from 表名 where 列名称1 = ? and 列名称1 >=
                    ?'　//常规查找
                  </p>
                  <p>
                    'select * from 表名 where 列名称1 = ? or 列名称1 >=
                    ?'　//常规查找
                  </p>
                  <p></p>
                  <p>'select * from 表名 ORDER BY ?'　//指定排序项</p>
                  <p>
                    'select * from 表名 ORDER BY ? LIMIT
                    2;'//只查找符合条件的2条
                  </p>
                  <p></p>
                  <p>WHERE 列名称 IS NOT NULL //非空</p>
                  <p>WHERE 列名称 LIKE "111%" //111开头的</p>
                  <p>WHERE 列名称 LIKE "%111" //111结尾的</p>
                  <p>WHERE 列名称 LIKE "%111%" //包含111的</p>
                  <p>WHERE 列名称 NOT LIKE "%111%" //不包含111的</p>
                  <p>'_a_' //三位且中间字母是a的</p>
                  <p>'_a' //两位且结尾字母是a的</p>
                  <p>'a_' //两位且开头字母是a的</p>
                  <p></p>
                  <p>WHERE 列名称 GLOB > 111　//大于111</p>
                  <p>WHERE 列名称 GLOB >= 111　//大于等于111</p>
                  <p>WHERE 列名称 GLOB != 111　//不等于111</p>
                  <p></p>
                  <p>WHERE 列名称 GLOB '111*'　//111开头的</p>
                  <p>WHERE 列名称 IN ( 25, 27 ) 　//值为25或27的</p>
                  <p>WHERE 列名称 NOT IN ( 25, 27 ) 　//值不为25或27的</p>
                  <p>WHERE 列名称 BETWEEN 25 AND 27 　//值在25到27之间的</p>
                  <p>
                    WHERE 列名称 IN ( '25', '27' )
                    　//注意:拼接sql时不要忘记引号
                  </p>
                  <p></p>
                  <p>//索引</p>
                  <p>
                    'CREATE INDEX IF NOT EXISTS 索引名 on 表名 (列名称1,
                    列名称2) '
                  </p>
                  <p>'DROP INDEX 索引名'</p>`,
          },
        ],
      };
    </script>
    <div id="app">
      <template>
        <el-card>
          <div style="margin-bottom: 20px">
            <el-collapse v-model="activeNames">
              <h4 style="margin: 0; margin-top: 10px">
                IndexedDB/websql 使用指南
              </h4>
              <el-collapse-item
                :title="item.title"
                :name="index+1"
                v-for="(item,index) in itemData"
                :key="index"
              >
                <!-- <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> -->
                <div style="nav-left: 10px">
                  <div v-html="item.text"></div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div style="display: flex; margin-bottom: 20px">
            <el-input
              placeholder="请输入内容"
              v-model="pages.kewords"
              clearable
              size="mini"
              @clear="getData"
              style="width: 260px; margin-right: 10px"
            ></el-input>
            <el-button size="mini" type="primary" @click="getData">
              搜索
            </el-button>
            <el-button size="mini" type="primary" @click="openDep('add')">
              新增部门
            </el-button>
          </div>
          <el-table :data="tableData" style="width: 100%" size="mini">
            <el-table-column type="index" width="40px"></el-table-column>
            <el-table-column prop="depName" label="部门名称"></el-table-column>
            <el-table-column prop="date" label="创建时间"></el-table-column>
            <el-table-column prop="" label="操作" min-width="86px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="openDep('edit',scope.row)"
                >
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="openDep('del',scope.row.depId)"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pages.page"
              :page-size="pages.size"
              :total="total"
              layout="total,prev, pager, next"
              :small="true"
            >
            </el-pagination>
          </div>
        </el-card>
        <!-- 对话框 -->
        <el-dialog
          :title="btnType=='add'?'新增部门':'更新部门'"
          :visible.sync="dialog"
          width="400px"
          @close="cannal"
          custom-class="dialog"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            size="mini"
          >
            <el-form-item label="部门名称" prop="depName">
              <el-input v-model="ruleForm.depName"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cannal">取 消</el-button>
            <el-button size="mini" type="primary" @click="savaDep">
              确 定
            </el-button>
          </span>
        </el-dialog>
      </template>
    </div>
    <script>
      var Main = {
        data() {
          return {
            tableData: [],
            pages: {
              page: 1,
              size: 5,
              kewords: "",
            },
            total: 0,
            itemData: sql.data.collapse,
            activeNames: [],
            dialog: false,
            ruleForm: {},
            rules: {
              depName: [
                { required: true, message: "请输入部门名称", trigger: "blur" },
                {
                  min: 2,
                  max: 10,
                  message: "长度在 2 到 10 个字符",
                  trigger: "blur",
                },
              ],
            },
            btnType: "",
          };
        },
        mounted() {
          this.getData();
          console.log(sql.data.collapse);
        },
        methods: {
          getData() {
            sql.dep.list(this.pages, (res) => {
              if (res.code !== 1)
                return this.$message.error("获取部门数据失败,请稍后重试");
              this.tableData = res.data;
              this.total = res.total;
            });
          },
          openDep(type, id = {}) {
            if (["add", "edit"].includes(type)) {
              this.btnType = type;
              this.ruleForm = JSON.parse(JSON.stringify(id));
              this.dialog = true;
              return;
            }
            sql.dep.del(id, (res) => {
              if (res.code !== 1)
                return this.$message.error("删除部门数据失败,请稍后重试");
              this.$message.success("删除部门数据成功!");
              this.getData();
            });
          },
          savaDep() {
            this.$refs.ruleForm.validate((valid) => {
              if (!valid) return;
              sql.dep[this.btnType](this.ruleForm, (res) => {
                if (res.code !== 1)
                  return this.$message.error(
                    `${
                      this.btnType === "add" ? "新增" : "更新"
                    }部门数据失败,请稍后重试`
                  );
                this.$message.success(
                  `${this.btnType === "add" ? "新增" : "更新"}部门数据成功!`
                );
                this.getData();
                this.dialog = false;
              });
            });
          },
          cannal() {
            this.dialog = false;
            this.$refs.ruleForm.resetFields();
          },
          handleCurrentChange(val) {
            this.pages.page = val;
            this.getData();
          },
        },
      };
      var Ctor = Vue.extend(Main);
      new Ctor().$mount("#app");
    </script>
  </body>
</html>
